<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <title>通话详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}"  media="all" />
    <link rel="stylesheet" th:href="@{/css/public.css}"  media="all" />
    <link rel="stylesheet" th:href="@{/css/jquery-labelauty.css}"  media="all" />
    <link rel="stylesheet" th:href="@{/css/jscrollpane1.css}"  media="all" />
    <link rel="stylesheet" th:href="@{/css/callTask/viewCallDetail.css}"  media="all" />
</head>
<body>

<div id="chat">
    <div class="sidebar">
        <div class="callDeatil">
            <span class="title">客户详情</span>
            <ul class="datalist">
                <li>
                    <span >客户姓名:</span>
                    <span  th:text="${callMap!=null && callMap.containsKey('customerName')?callMap.customerName:''}">陈小姐</span>
                </li>
                <th:block th:if="${callMap!=null && callMap.containsKey('targetCallPhone')}">
                    <li>
                        <span >坐席号码:</span>
                        <span  th:text="${callMap!=null && callMap.containsKey('targetCallPhone')?callMap.targetCallPhone:''}">020-38881775</span>
                    </li>
                </th:block>
                <li>
                    <span >客户号码:</span>
                    <span  th:text="${callMap!=null && callMap.containsKey('mainCallPhone')?callMap.mainCallPhone:''}" >020-22954770</span>
                </li>
                <li  id="showNum" style="display: none">
                    <span >主显号码:</span>
                    <span   id="showNumTxt" th:text="${callMap!=null && callMap.containsKey('showNum')?callMap.showNum:''}"></span>
                </li>
                <li >
                    <span >外呼时间:</span>
                    <span  th:text="${callMap!=null && callMap.containsKey('createTime')?callMap?.createTime:''}"></span>
                </li>
            </ul>
        </div>

        <div class="callStatus">
            <table class="datalist" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td style="text-align: center" ><div style="width: 50px">通话状态</div></td>
                    <td class="valTd"><span class="item-val" id="txResult" th:text="${callStatus}"></span></td>
                </tr>
            </table>
            <ul class="datalist">
                <li class="item">
                    <span >
                        <div class="statusDiv">
                            <div class="item-titel" id="connectTime" th:text="${connectTime}"></div>
                            <div class="item-val">通话时长</div>
                        </div>
                    </span>
                    <span>
                        <div class="statusDiv">
                            <div class="item-titel" th:text="${callMap!=null && callMap!=null&&callMap.containsKey('roundTimes')?(callMap.roundTimes+'轮'):'0轮'}"></div>
                            <div class="item-val">通话轮次</div>
                        </div>
                    </span>
                </li>
            </ul>
        </div>


        <div class="followDiv" >
            <span class="title">跟进反馈</span>
            <div>
                <div style="float: left;text-align: center;">
                    <span style="color: #ffffff;font-size: 14px;">自动分类</span>
                    <ul class="dowebok" >
                        <th:block th:if="${customerNeedLevels}">
                            <li th:each="it:${customerNeedLevels}">
                                <input type="radio" name="radio"  th:data-labelauty="${it.desc}"  th:value="${it.value}" disabled
                                       th:checked="${callMap!=null && callMap!=null && (callMap.containsKey('customerNeedLevel')?callMap.customerNeedLevel:null) !=null ? #lists.contains(callMap?.customerNeedLevel,#strings.toString(it.name())):'false'}">
                            </li>
                        </th:block>
                    </ul>
                </div>
                <div style="float: left;text-align: center;">
                    <span style="color: #ffffff;font-size: 14px;">人工分类</span>
                    <ul class="dowebok">
                        <th:block th:if="${customerFollowCategorys}">
                            <li th:each="it:${customerFollowCategorys}">
                                <input type="radio" name="radio"  th:data-labelauty="${it.desc}"  th:value="${it.value}" disabled
                                       th:checked="${callMap!=null && callMap.containsKey('customerFollowCategory')?callMap.customerFollowCategory:null !=null ? #lists.contains(callMap?.customerFollowCategory,#strings.toString(it.name())):'false'}">
                            </li>
                        </th:block>
                    </ul>
                </div>
            </div>
        </div>
        <th:block th:if="${callMap!=null&&callMap.containsKey('focusWords')?callMap.focusWords:null}">
            <div class="fouceDiv" style="margin-top:10px;padding: 10px 10px;">
                <span style="color: #ffffff;font-weight: bold;font-size: 16px;">客户关注点</span>
                <div style="float: left;text-align: center;">
                    <ul class="dowebok">
                        <li th:each="it:${callMap.focusWords}">
                            <input type="radio" name="radio"  th:data-labelauty="${it}"  th:value="${it}" disabled>
                        </li>

                        <!--<li><input type="radio" name="radio2" data-labelauty="户型" disabled></li>
                        <li style="margin-left: 8px;"><input type="radio" name="radio2" data-labelauty="价格" disabled  ></li>
                        <li><input type="radio" name="radio2" data-labelauty="学位房" disabled></li>
                        <li style="margin-left: 8px;"><input type="radio" name="radio2" data-labelauty="近地铁" disabled ></li>-->
                    </ul>
                </div>
            </div>
        </th:block>
    </div>
    <div class="main">
        <div class="talk">
            <div class="talk_title"><span>实时通话记录</span></div>
            <th:block th:if="${callMap!=null && callMap.containsKey('targetCallLength') && callMap?.targetCallLength>0 &&  callMap.containsKey('recordFileUrl') }">
                <div class="talk_title">
                    <span>
                    <audio style="height: 30px;width: 250px;min-width: 200px;"  preload="none"   th:src="${callMap?.recordFileUrl}"
                           name="audio" controls="controls" oncontextmenu="return false"
                           onplay="" />
                    </span>
                     <span>
                        <a style="color: #FFFFFF" onclick="down(this)" th:sessionId="${callMap!=null?callMap?.sessionId:''}" th:url="${callMap!=null?callMap?.recordFileUrl:''}" ><i class="layui-icon" style="font-size:25px;">&#xe601;</i></a>
                    </span>
                </div>
            </th:block>
            <div class="talk_record">
                <div id="jp-container" class="jp-container" >
                   <!-- <div class="talk_recordboxme">
                        <div class="user"><img  th:src="@{/images/15.jpg}" />客户</div>
                        <div class="talk_recordtextbg">&nbsp;</div>
                        <div class="talk_recordtext">
                            <h3>我的问题是：1+1=？建议挽留话术：广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体
                                广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体
                                广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一</h3>
                            <span class="talk_time">2014-09-15 15:06</span>
                        </div>
                        <div  class="tip_recordboxme">
                             <span class="item-name" style="padding: 5px">
                                 匹配到知识库问题:【开始】
                             </span>
                        </div>
                    </div>
                    <div class="talk_recordbox">
                        <div class="user"><img th:src="@{/images/11.jpg}" />经纪</div>
                        <div class="talk_recordtextbg">&nbsp;</div>
                        <div class="talk_recordtext">
                            <h3>对方的回答是：1+1=2</h3>
                           <span class="talk_time">2014-09-15 15:06</span>
                        </div>
                    </div>

                    <div class="tip_msg_recordboxme" >
                        <div class="talk_msg_recordtext">
                            <span>建议挽留话术：广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体
                            广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体
                            广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体</span>
                        </div>
                    </div>


                    <div class="talk_recordboxme">
                        <div class="user"><img  th:src="@{/images/15.jpg}" />客户</div>
                        <div class="talk_recordtextbg">&nbsp;</div>
                        <div class="talk_recordtext">
                            <h3>我的问题是：1+1=？</h3>
                        </div>
                        <div  class="tip_recordboxme">
                             <span class="item-name" style="padding: 5px">
                                 匹配到知识库问题:【开始】
                             </span>
                        </div>
                    </div>

                    <div class="talk_recordbox">
                        <div class="user"><img th:src="@{/images/11.jpg}" />经纪</div>
                        <div class="talk_recordtextbg">&nbsp;</div>
                        <div class="talk_recordtext">
                            <h3>对方的回答是：1+1=2</h3>
                            <span class="talk_time">2014-09-15 15:06</span>
                        </div>
                    </div>


                    <div class="tip_msg_recordboxme" >
                        <div class="talk_recordtext">
                            <span style="font-size: 12px;width: 450px">建议挽留话术：广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体
                            广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体
                            广佛智城项目地处于广佛国际商贸中心区，是集产业、商业、互联网+、孵化于一体</span></div>
                    </div>-->
                </div>
            <!--<div class="talk_word"></div>-->
            </div>
         </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    const baseUrl = [[${#servletContext.contextPath}]];
    var mapList = [[${mapList}]];
    const sessionId = [[${sessionId}]];
    const fromPage = "callDetailPage";
    const commitTo = [[${commitTo}]];
    const firstSpeaking = [[${firstSpeaking}]];
    console.log(commitTo);
</script>
<script type="text/javascript"   th:src="@{/js/layui/layui.js}"></script>
<script type="text/javascript"   th:src="@{/js/jquery-1.7.2.min.js}"></script>
<script type="text/javascript"   th:src="@{/js/page/linkageCall/viewCallDetail.js(v=${new java.util.Date().getTime()})}"></script>
<script type="text/javascript"   th:src="@{/js/jquery-labelauty.js}"></script>
<script type="text/javascript"   th:src="@{/js/jquery.mousewheel.js}"></script>
<script type="text/javascript"   th:src="@{/js/jquery.jscrollpane.min.js}"></script>
<script type="text/javascript"   th:src="@{/js/scroll-startstop.events.jquery.js}"></script>
<script type="text/javascript"   th:src="@{/js/page/utils.js}"></script>
<script>
    $(function(){
        $(':input').labelauty();
    });
</script>
</body>
</html>